<!--登录页-->
<template>
    <div id="main">
        <div id="header">
            <h1 onselectstart="return false" style="cursor: default;font-weight:800;font-size:40px">健 身 会 所 管 理 系 统</h1>
            <p> &nbsp;</p>
			<div id="particles" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div>
        </div>
        <div style="display: flex; justify-content: flex-end; align-items: flex-start;margin-right: 10%;">
            <div id="loginform">
                <div class="input-group">
                    <el-input type="text" id="inputUser" placeholder="用户名" autofocus=true clearable v-model="username"
                              onkeydown="if (event.keyCode == 13) { $('#inputPassword').focus(); return false; }">
                    </el-input>
                </div>
                <div class="input-group">
                    <el-input type="password" id="inputPassword" placeholder="密码" autocomplete="off" clearable
                              v-model="userpwd"
                              onkeydown="if (event.keyCode == 13) { $('#inputAuthCode').focus(); return false; }">
                    </el-input>
                </div>
                <div class="input-group" style="display: flex; ">
                    <div style="flex: auto;  margin-right: 0.3rem;">
                        <el-input type="text" id='inputAuthCode' placeholder="校验码" autocomplete="off" clearable
                                  v-model="authcode"
                                  onkeydown="if (event.keyCode == 13) {vm.onLogin()}"
                                  >
                        </el-input>
                    </div>
                    <div class="imgAuthCode" style="position: relative;">
                        <canvas id="canvas" @click="changeImg"></canvas>
                    </div>
                </div>
                <div >
                    <el-button type="text" @click="goRegister" style="margin-left:320px;position:absolute;color:#000000" >新用户注册
                    </el-button>
                </div>
                <div class="input-group">
                    <el-button style="background-color: rgb(218, 214, 22); color: black; width: 100%; font-size: 1rem;margin-top:46px;font-weight:700"
                               size="large" @click="onLogin">登 录
                    </el-button>
                </div>
            </div>


        </div>
    </div>

</template>

<script>

import webservice from '../../utils/webservice'
export default {
    data: function () {
        return {
            username: '', //用户名
            userpwd: '', //密码
            authcode: '', //校验码
            imgAuthcode: '', //图片校验码
            canvas:document.getElementById("canvas"),
            context:'',

        }
    },
    created: function () {


    },
    mounted: function () {
        var vm = this;
        var canvas = document.getElementById("canvas");
        this.context = canvas.getContext("2d");//getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
        vm.draw();
        window.vm = this;
    },
    methods: {
        onLogin(){
            if ($.trim(this.username) === '') {
                this.$message({
                    message: '请输入登录用户名',
                    type: 'warning'
                })
                $('#inputUser').focus();
                return;
            }
            if ($.trim(this.userpwd) === '') {
                this.$message({
                    message: '请输入登录密码',
                    type: 'warning'
                });
                $('#inputPassword').focus();
                return;
            }
            if ($.trim(this.authcode) === '') {
                this.$message({
                    message: '请输入图形校验码',
                    type: 'warning'
                })
                $('#inputAuthCode').focus();
                return;
            }
            if(this.authcode != this.imgAuthcode){
                this.$message({
                    message: '图形校验码输入错误',
                    type: 'warning'
                })
                return;
            }
            let _param = {
                phone : this.username,
                password: this.userpwd,
            };
            const params = JSON.stringify(_param)
            webservice.HttpPost("/api/user/login", params, (data) => {
                if (data.code === 200) {
                    window.sessionStorage.setItem('TokenID',data.data.token)
                    window.sessionStorage.setItem('userInfo', JSON.stringify(data.data.user))
                    this.$message.success('登录成功！')
                    this.$router.push(this.$route.query.redirect ? this.$route.query.redirect :'/index')
                } else  {
                    this.$message.error(data.message);
                }
            })
        },
        changeImg(){
            this.context.clearRect(0, 0, 90, 40);//在给定的矩形内清除指定的像素
            this.draw();
        },
         // 随机颜色函数
        getColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        },
        draw() {
                this.context.strokeRect(0, 0, 120, 40);//绘制矩形（无填充）
                var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
                // 绘制字母
                var arr = [] //定义一个数组用来接收产生的随机数
                var num //定义容器接收验证码
                for (var i = 0; i < 4; i++) {
                    var x = 10 + i * 20;//每个字母之间间隔20
                    var y = 20 + 10 * Math.random();//y轴方向位置为20-30随机
                    var index = Math.floor(Math.random() * aCode.length);//随机索引值
                    var txt = aCode[index];
                    this.context.font = "bold 20px 微软雅黑";//设置或返回文本内容的当前字体属性
                    this.context.fillStyle = this.getColor();//设置或返回用于填充绘画的颜色、渐变或模式，随机
                    this.context.translate(x, y);//重新映射画布上的 (0,0) 位置，字母不可以旋转移动，所以移动容器
                    var deg = 90 * Math.random() * Math.PI / 180;//0-90度随机旋转
                    this.context.rotate(deg);// 	旋转当前绘图
                    this.context.fillText(txt, 0, 0);//在画布上绘制“被填充的”文本
                    this.context.rotate(-deg);//将画布旋转回初始状态
                    this.context.translate(-x, -y);//将画布移动回初始状态
                    arr[i] = txt //接收产生的随机数
                }
                num = arr[0] + arr[1] + arr[2] + arr[3] //将产生的验证码放入num
                this.imgAuthcode = num
                // 绘制干扰线条
                for (var i = 0; i < 8; i++) {
                    this.context.beginPath();//起始一条路径，或重置当前路径
                    this.context.moveTo(Math.random() * 120, Math.random() * 40);//把路径移动到画布中的随机点，不创建线条
                    this.context.lineTo(Math.random() * 120, Math.random() * 40);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
                    this.context.strokeStyle = this.getColor();//随机线条颜色
                    this.context.stroke();// 	绘制已定义的路径
                }
                // 绘制干扰点，和上述步骤一样，此处用长度为1的线代替点
                for (var i = 0; i < 20; i++) {
                    this.context.beginPath();
                    var x = Math.random() * 120;
                    var y = Math.random() * 40;
                    this.context.moveTo(x, y);
                    this.context.lineTo(x + 1, y + 1);
                    this.context.strokeStyle = this.getColor();
                    this.context.stroke();
                }

        },
        goRegister(){
            this.$router.push('/Register')
        }
    }
}
</script>

<style scoped>
#app{
    height: 100%!important
}
html,body{
    height: 100%!important;
}
#main {
    position: relative;
    min-height: 100%;
    background-image: url(../../assets/body-bg.jpg);
     background-repeat: no-repeat;   
    background-size: cover;     
}


#header {
    position: relative;
    padding: 1rem 0.7rem 0 0.7rem;
    color: #fff;
    text-align: center;
    background-size: cover;
}

#loginform {
    position: relative;
    margin-top: 50px;
    padding: 2rem 1rem 1rem 1rem;
    width: 400px;
    height: 300px;
    z-index: 1;
    background-color: #fff;
    border-radius: 0.17rem;
    box-shadow: 0 5px 15px rgba(9, 44, 143, 0.12), 0 0 6px rgba(0, 0, 0, .04)
}

.input-group {
    height: 40px;
    margin-bottom: 2rem;
}

.imgAuthCode {
    width: 120px !important;
}

.login-footer {
    margin-top: 0.6rem;
    color: #686f76;
    text-align: center;
    width: 100%;
    font-size: 0.6rem;
}
</style>
